@page
@{ Layout = "_LayoutApp"; }
@section Styles{
    <style>
        html {
            overflow-x: hidden !important;
        }

        body {
            padding: 0;
            margin: 0;
        }
    </style>
}
<main>
    <section class="py-8 bg-cover" :style="{'background-image':'url('+studyPlan.plan.coverImg+')'}">
        <div class="py-5 text-center">
        </div>
    </section>
    <section class="bg-white shadow-sm position-relative">
        <div class="position-absolute top-0 end-0 translate-middle-y pe-3">
            <img width="88" src="/sitefiles/assets/images/status/weikaishi.png" v-if="studyPlan.state==='Weikaishi'" />
            <img width="88" src="/sitefiles/assets/images/status/xuexizhong.png" v-if="studyPlan.state==='Xuexizhong'" />
            <img width="88" src="/sitefiles/assets/images/status/yidabiao.png" v-if="studyPlan.state==='Yidabiao'" />
            <img width="88" src="/sitefiles/assets/images/status/weidabiao.png" v-if="studyPlan.state==='Weidabiao'" />
            <img width="88" src="/sitefiles/assets/images/status/yiwancheng.png" v-if="studyPlan.state==='Yiwancheng'" />
        </div>
        <div class="container">
            <div class="row align-items-center">
                <div class="col-xl-12 col-lg-12 col-md-12 col-12">
                    <div class="d-md-flex align-items-center justify-content-between bg-white pt-3 pb-3 pb-lg-5">
                        <div class="d-md-flex align-items-center text-lg-start text-center">
                            <div class="mt-3 mt-md-0">
                                <div class="mb-0 fw-semibold me-3">{{ studyPlan.plan.planName }}</div>
                            </div>
                        </div>
                    </div>
                    <div class="mb-3">
                        <div class="mb-3">
                            <blockquote class="card blockquote-left pt-3 card-lift rounded-4">
                                <p class="mb-3 font-italic ms-4">
                                    {{ studyPlan.plan.planBeginDateTimeStr }} -  {{ studyPlan.plan.planEndDateTimeStr }}
                                </p>
                                <footer class="blockquote-footer ms-4">计划周期</footer>
                            </blockquote>
                        </div>
                        <div class="d-flex justify-content-between align-items-center">
                            <blockquote class="card rounded-4 blockquote-left border-warning pt-3 card-lift w-100">
                                <p class="mb-3 font-italic ms-4">
                                    <span class="fw-bold text-success">{{ studyPlan.totalCredit }}</span>/<span class="fw-light fs-5">{{ studyPlan.plan.planCredit }}</span>
                                </p>
                                <footer class="blockquote-footer ms-4">计划学分</footer>
                            </blockquote>
                            <blockquote class="card rounded-4 blockquote-left ms-4 pt-3 card-lift w-100">
                                <p class="mb-3 font-italic ms-4">
                                    {{ studyPlan.plan.planYear }}
                                </p>
                                <footer class="blockquote-footer ms-4">计划年度</footer>
                            </blockquote>
                        </div>
                        <div class="mb-3">
                            <blockquote class="card rounded-4 blockquote-left card-lift pt-3 border-warning">
                                <p class="mb-3 font-italic ms-4">
                                    <span class="fw-bold text-success">{{ studyPlan.overCourseTotal }}</span>/<span class="fw-light fs-5">{{ studyPlan.plan.totalCount }}</span>
                                </p>
                                <footer class="blockquote-footer ms-4">必修课
                                    <span class="ms-2 text-success" v-if="studyPlan.overCourseTotal>=studyPlan.plan.courseTotal">已完成</span>
                                    <span class="ms-2 text-warning" v-else>请完成所有必修课的学习</span>
                                </footer>
                            </blockquote>
                        </div>
                        <div class="mb-3">
                            <blockquote class="card rounded-4 blockquote-left border-warning card-lift pt-3">
                                <p class="mb-3 font-italic ms-4">
                                    <span class="fw-bold text-success">{{ studyPlan.overSelectCourseTotal }}</span>/<span class="fw-light fs-5">{{ studyPlan.plan.selectTotalCount }}</span>
                                </p>
                                <footer class="blockquote-footer ms-4">
                                    选修课
                                    <span :class="studyPlan.overSelectCourseTotal>=studyPlan.plan.selectCourseOverCount ? 'text-success' : ' text-danger'" class="ms-2" v-if="studyPlan.plan.selectCourseOverByCount">任意完成 {{ studyPlan.overSelectCourseTotal }}/{{ studyPlan.plan.selectCourseOverCount }} 门课程</span>
                                    <span :class="(studyPlan.plan.selectCourseOverByDuration/60)>=studyPlan.plan.selectCourseOverMinute ? 'text-success' : ' text-danger'" class="ms-2 text-warning" v-if="studyPlan.plan.selectCourseOverByDuration">学时要求: {{ utils.formatDuration(studyPlan.overSelectCourseDurationTotal) }}/{{ studyPlan.plan.selectCourseOverMinute }}分钟</span>
                                </footer>
                            </blockquote>
                        </div>
                        <div class="mb-3">
                            <blockquote class="card rounded-4 blockquote-left border-warning card-lift pt-3" v-if="studyPlan.plan.examId>0">
                                <p class="mb-3 font-italic ms-4">
                                    <span v-if="studyPlan.state==='Yidabiao' || studyPlan.state==='Yiwancheng'">
                                        <span class="fw-bold text-success">{{ studyPlan.plan.examName }}（{{studyPlan.maxScore}}）</span>
                                    </span>
                                    <span v-else>
                                        <span v-if="studyPlan.courseOver">
                                            <span class="fw-bold text-warning" style="cursor:pointer;" v-on:click="btnViewExamClick">{{ studyPlan.plan.examName }}（去考试）</span>
                                        </span>
                                        <span v-else>
                                            <span class="fw-bold text-danger" style="cursor:pointer;" v-on:click="utils.error('请先完成学习',{layer:true})">{{ studyPlan.plan.examName }}（去考试）</span>
                                        </span>
                                    </span>
                                </p>
                                <footer class="blockquote-footer ms-4">
                                    计划考试
                                </footer>
                            </blockquote>
                        </div>
                    </div>
                    <ul class="nav nav-lt-tab" id="pills-tab" role="tablist">
                        <li class="nav-item ms-0" role="presentation">
                            <a class="nav-link active" id="pills-course-tab" data-bs-toggle="pill" href="#pills-course" role="tab" aria-controls="pills-course" aria-selected="true">
                                必修课<span v-if="studyPlan.overCourseTotal>=studyPlan.plan.courseTotal" class="ps-2 text-success">（已完成）</span>
                            </a>
                        </li>
                        <li class="nav-item" role="presentation">
                            <a class="nav-link" id="pills-about-tab" data-bs-toggle="pill" href="#pills-about" role="tab" aria-controls="pills-about" aria-selected="false" tabindex="-1">
                                选修课
                                <span>
                                    <span v-if="studyPlan.plan.selectCourseOverByCount && studyPlan.plan.selectCourseOverByDuration">
                                        <span v-if="studyPlan.overSelectCourseTotal>=studyPlan.plan.selectCourseOverCount && (studyPlan.plan.selectCourseOverByDuration/60)>=studyPlan.plan.selectCourseOverMinute">
                                            <span class="ps-2 text-success">（已完成）</span>
                                        </span>
                                    </span>
                                    <span v-else>
                                        <span v-if="studyPlan.plan.selectCourseOverByCount">
                                            <span v-if="studyPlan.overSelectCourseTotal>=studyPlan.plan.selectCourseOverCount">
                                                <span class="ps-2 text-success">（已完成）</span>
                                            </span>
                                        </span>
                                        <span v-else>
                                            <span v-if="(studyPlan.plan.selectCourseOverByDuration/60)>=studyPlan.plan.selectCourseOverMinute">
                                                <span class="ps-2 text-success">（已完成）</span>
                                            </span>
                                        </span>
                                    </span>
                                </span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </section>
    <section class="py-6">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="tab-content" id="pills-tabContent">
                        <div class="tab-pane fade show active pb-8" id="pills-course" role="tabpanel" aria-labelledby="pills-course-tab">
                            <div class="mb-3">
                                <p>请完成所有必修课学习</p>
                            </div>
                            <div class="card rounded-4 mb-3" v-for="course in studyPlan.courseList" v-on:click="btnViewCourseClick(course)">
                                <div class="card-body p-2">
                                    <div class="row g-3">
                                        <div class="col-xl-6 col-lg-6 col-md-6 col-6">
                                            <div class="position-relative">
                                                <img :src="course.coverImg" class="img-fluid card-img rounded-4">
                                                <el-tag size="mini" type="success" effect="dark" class="position-absolute top-0 end-0 m-2" v-if="course.state==='Yiwancheng'">{{ course.stateStr }}</el-tag>
                                                <el-tag size="mini" type="warning" effect="dark" class="position-absolute top-0 end-0 m-2" v-else>{{ course.stateStr }}</el-tag>
                                                <span class="position-absolute bottom-0 start-0 m-2">
                                                    <el-tag size="mini" type="primary" effect="dark" class="me-1">{{ course.courseType}}</el-tag>
                                                    <el-tag size="mini" type="primary" effect="plain" v-if="course.offLine">面授课</el-tag>
                                                </span>
                                            </div>
                                        </div>
                                        <div class="col-xl-6 col-lg-6 col-md-6 col-6">
                                            <div class="mb-3">
                                                <span class="fw-semibold">{{ course.name }}</span>
                                            </div>
                                            <div class="lh-1">
                                                <i class="bi bi-credit-card-2-front-fill me-2"></i><span>{{ course.studyHour }}</span>课时
                                            </div>
                                            <div class="lh-1">
                                                <i class="bi bi-credit-card-2-front-fill me-2"></i>
                                                <span class="text-success" v-if="course.state==='Yiwancheng'">{{ course.credit }}</span>
                                                <span v-else>{{ course.credit }}</span>
                                                学分
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade  pb-8" id="pills-about" role="tabpanel" aria-labelledby="pills-about-tab">
                            <div class="mb-3">
                                <p>
                                    <span :class="studyPlan.overSelectCourseTotal>=studyPlan.plan.selectCourseOverCount ? 'text-success' : ' text-danger'" class="me-2" v-if="studyPlan.plan.selectCourseOverByCount">完成条件：任意完成 {{ studyPlan.overSelectCourseTotal }}/{{ studyPlan.plan.selectCourseOverCount }} 门课程</span>
                                    <span :class="(studyPlan.plan.selectCourseOverByDuration/60)>=studyPlan.plan.selectCourseOverMinute ? 'text-success' : ' text-danger'" class="text-warning" v-if="studyPlan.plan.selectCourseOverByDuration">累计学时要求: {{ utils.formatDuration(studyPlan.overSelectCourseDurationTotal) }}/{{ studyPlan.plan.selectCourseOverMinute }}分钟</span>
                                </p>
                            </div>
                            <div class="card rounded-4 mb-3" v-for="course in studyPlan.courseSelectList" v-on:click="btnViewCourseClick(course)">
                                <div class="card-body p-2">
                                    <div class="row g-3">
                                        <div class="col-xl-6 col-lg-6 col-md-6 col-6">
                                            <div class="position-relative">
                                                <img :src="course.coverImg" class="img-fluid card-img rounded-4">
                                                <el-tag size="mini" type="success" effect="dark" class="position-absolute top-0 end-0 m-2" v-if="course.state==='Yiwancheng'">{{ course.stateStr }}</el-tag>
                                                <el-tag size="mini" type="warning" effect="dark" class="position-absolute top-0 end-0 m-2" v-else>{{ course.stateStr }}</el-tag>
                                                <span class="position-absolute bottom-0 start-0 m-2">
                                                    <el-tag size="mini" type="primary" effect="dark" class="me-1">{{ course.courseType}}</el-tag>
                                                    <el-tag size="mini" type="primary" effect="plain" v-if="course.offLine">面授课</el-tag>
                                                </span>
                                            </div>
                                        </div>
                                        <div class="col-xl-6 col-lg-6 col-md-6 col-6">
                                            <div class="mb-3">
                                                <span class="fw-semibold">{{ course.name }}</span>
                                            </div>
                                            <div class="lh-1">
                                                <i class="bi bi-credit-card-2-front-fill me-2"></i><span>{{ course.studyHour }}</span>课时
                                            </div>
                                            <div class="lh-1">
                                                <i class="bi bi-credit-card-2-front-fill me-2"></i>
                                                <span class="text-success" v-if="course.state==='Yiwancheng'">{{ course.credit }}</span>
                                                <span v-else>{{ course.credit }}</span>学分
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <div class="card rounded-4 mt-3 mx-3">
        <div class="card-header">
            <h4 class="mb-0">培训介绍</h4>
        </div>
        <div class="card-body">
            <p v-html="studyPlan.plan.description"></p>
        </div>
    </div>
</main>
<div class="py-8"></div>
<div style="position:fixed;left:0;bottom:0;width:100%;" class="text-center mb-5 animate__animated animate__fadeInUp">
    <div class="btn-group">
        <button type="button" class="btn btn-primary rounded-pill"  v-on:click="utils.closeLayerSelf"><i class="el-icon-back me-2"></i>返 回</button>
    </div>
</div>
@section Scripts{
    <script src="/sitefiles/assets/lib/geeks/js/bootstrap.bundle.min.js" type="text/javascript"></script>
    <script src="/sitefiles/assets/js/app/study/studyPlanInfo.js" type="text/javascript"></script>
}